<!--
 * @Description: 月度报表
 * @Author: charles
 * @Date: 2021-12-06 17:09:59
 * @LastEditors: charles
 * @LastEditTime: 2022-01-04 07:19:56
-->
<template>
  <div class="history">
    <div class="pro_dev">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
      <el-tree :data="proDevTree"
        ref="tree"
        :filter-node-method="filterNode"
        :props="{children: 'children', label: 'name'}" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="data_container" v-loading="loading">
      <div v-if="params.device_id">
        <el-row>
          <el-col :span="16">
            <el-form inline>
              <el-form-item>
                 <el-date-picker
                    v-model="params.time"
                    clearable
                    type="datetimerange"
                    range-separator="至"
                    value-format="timestamp"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="loadMonitor">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8" style="text-align:right">
            <el-button icon="el-icon-download" type="primary">下载</el-button>
          </el-col>
        </el-row>
        <el-table :data="monitorData.list">
          <el-table-column label="日期" align="center" width="150">
            <template slot-scope="scope">
              {{scope.row.insert_time | fmtTime}}
            </template>
          </el-table-column>
          <el-table-column label="tsp" prop="tsp" align="center" width="60"></el-table-column>
          <el-table-column label="pm10" prop="pm10" align="center" width="60"></el-table-column>
          <el-table-column label="pm2.5" prop="pm25" align="center" width="60"></el-table-column>
          <el-table-column label="温度" prop="temperature" align="center" width="60"></el-table-column>
          <el-table-column label="湿度" prop="humidity" align="center" width="60"></el-table-column>
          <el-table-column label="风向" prop="wind_direction" align="center"></el-table-column>
          <el-table-column label="风速" prop="wind_speed" align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          small
          hide-on-single-page
          :total="monitorData.total"
          :page-size="+monitorData.pageSize"
          :current-page="+monitorData.page"
          @current-change="currentChangeHandler"
        />
        <!-- 分页 -->
      </div>
      <div class="info" v-else> 请选择设备进行查看</div>
    </div>
  </div>
</template>
<script>
import {get} from '@/utils/request'
import moment from 'moment'
import _ from 'lodash'
export default {
  data(){
    return {
      loading:false,
      filterText:"",
      proDevTree:[],
      monitorData:[],
      params:{
        page:1,
        pageSize:15,
        device_id:0,
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted(){
    this.loadProDevTree();
  },
  methods:{
    // 加载监测数据
    loadMonitor(){
      this.loading = true;
      let params = _.clone(this.params)
      if(params.time && params.time.length == 2){
        params = Object.assign({},params,{
          begin_time:this.params.time[0],
          end_time:this.params.time[1]
        })
        delete params.time;
      }
      let url = "/monitor/pageQuery"
      get(url,params).then(resp => {
        this.monitorData = resp.data;
      }).finally(()=>{
        this.loading = false
      })
    },
    // 加载工程设备
    loadProDevTree(){
      let url = "/engineer/findEngineerDeviceTree"
      get(url).then(resp => {
        this.proDevTree =  resp.data;
      })
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点
    handleNodeClick(node){
      if(!node.children){
        this.params.device_id = node.id
        this.params.engineer_id = node.engineer_id
        // 加载监测数据
        this.loadMonitor();
      }
    },
      // 当前页发生改变
    currentChangeHandler(page) {
      this.params.page = page
      this.loadMonitor();
    }
  }
}
</script>
<style>
  
</style>
<style lang="scss" scoped>
.history {
  position: absolute;
  width: 100%;
  top: .5em;
  bottom: .5em;
  display: flex;
  .pro_dev {
    flex-basis: 180px;
    padding-right: .5em;
    border-right: 1px solid #dfe4ed;
  }
  .data_container {
    flex: 1;
    padding: 0 1em;
  }

  .info {
    padding: 3em 0;
    text-align: center;
    color: red;
  }
}
</style>